<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义过滤器</title>
    <script src="js/vue.js"></script>
    <script>
        /**
         * 自定义全局过滤器
         */
        Vue.filter('addZone', function (data) {
            return data < 10 ? '0' + data : data;
        });
        // Vue.filter('number', function (data, n) {
        //     console.log(data, n);
        //     return data.toFixed(n);
        // });
        Vue.filter('date', function (data) {
            console.log(data);
            let d = new Date(data);
            return d.getFullYear() + '-'
                + (d.getMonth() + 1) + '-'
                + d.getDate() + ' '
                + d.getHours() + ':'
                + d.getMinutes() + ':'
                + d.getSeconds();
        });
        window.onload = function () {
            new Vue({
                el: '#itany',
                data: {
                    currentTime: Date.now()
                },
                // 局部过滤器
                filtes: {
                    number: (data, n) => {
                        console.log(data, n);
                        return data.toFixed(n);
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="itany">
    <h3>{{18 | addZone}}</h3>
    <h3>{{8 | addZone}}</h3>
    <h3>{{12.345678 | number(2)}}</h3>
    <!-- toFixed本身存在bug，参考：
    https://www.cnblogs.com/smallpen/p/9527183.html
     -->
    <h3>{{12.045 | number(2)}}</h3>

    <h3>{{currentTime | date}}</h3>
</div>
</body>
</html>